<script setup>
import { onMounted, getCurrentInstance, ref, watch, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import $fetch from "../utils/request";
const $router = useRouter();
import { mainStore } from "../store/index";
import SearchFor from "./searchFor.vue";
const store = mainStore();
const { proxy } = getCurrentInstance();
const { $mapevent,$TrailLinkMaterial } = proxy;
let cameraData = ref(null);
let toolsLeft = ref(-488);
let timer = 0;
let trigger = ref(false);
onMounted(() => {
    toolsLeft.value = 20;
    window.outgeom = outgeom;
    $mapevent.setviewer();
    DimensionData();
    setTimeout(async () => {
        comprehensive();
        window.f_GetCurCameraInfo = $mapevent.f_GetCurCameraInfo;
        cameraData.value = $mapevent.f_GetCurCameraInfo();
        await $mapevent.f_Township();
        await $mapevent.fwqIconAdd(
            "glz (1)",
            1001,
            8,
            "#333333",
            "biao",
            20000,
            18,
            18
        );
        await $mapevent.fwqIconAdd(
            "fwq",
            1005,
            10,
            "#0000ff",
            "fwq2",
            140000,
            29,
            37
        );
        await $mapevent.fwqIconAdd(
            "sfz",
            1004,
            10,
            "#ffbe00",
            "openness",
            210000,
            23,
            23
        );
        await $mapevent.fwqIconAdd(
            "lj",
            1006,
            10,
            "#00FF00",
            "sfz2",
            50000,
            29,
            37
        );
        await $mapevent.f_Add3DTextArrys();
        // await $mapevent.f_LoadTile('http://3d.yugaosu.com/3d/lkx/tileset.json', 0)
        // $mapevent.liudong()
    }, 0);
});
function DimensionData() {
    // console.log(206);
    gsnamedata.forEach((element) => {
        $mapevent.f_AddDimension(
            element.name,
            element.gid,
            1003,
            $mapevent.flyto(element.geom, 1),
            10,
            "#fff",
            2000000,
            element.name,
            48,
            48
        );
    });
}
function outgeom(obj) {
    ElMessageBox.alert(
        `点击位置坐标为：
            <br/>经度:${obj.lon.toFixed(3)}度
            <br/>纬度:${obj.lat.toFixed(3)}度
            <br/>高程:${obj.height}米`,
        "坐标",
        {
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            callback: (action) => {},
        }
    );
}
function comprehensive() {
    $mapevent.f_SetMapView(
        4.657962904275337e-11, // heading
        -0.6527547578261572, // pitch
        6.283185307107175, // roll
        -2100474.1278906944, // lon
        4949012.632005093, // lat
        3565997.248834578 // height
    );
}

function addGDmap() {
    trigger.value = !trigger.value;
    console.log(trigger);
    if (trigger.value) {
        $mapevent.GDlkmap();
        timer = setInterval(() => {
            $mapevent.GDlkmap();
        }, 30000);
    } else {
        clearInterval(timer);
    }
}
function ttt() {
    store.showother = !store.showother;
    // console.log(store.showother);
}

function add3dtile(e, h) {
    $mapevent.f_LoadTile(e, h);
    //12670926.799, 4023424.989
}

var POI = [
    { lon: 113.6197238586, lat: 34.7575827241, name: "郑州市" },
    { lon: 114.3019727557, lat: 34.7999956407, name: "开封市" },
    { lon: 113.7017194684, lat: 34.7771534489, name: "景观地理研究院" },
];
function addpoint(p) {
    $mapevent.f_AddPoi(p);
}

var geom = [113.6197238586, 34.7575827241];
function addimgpoint(name, code, geom) {
    //抛弃
    $mapevent.f_AddIconLabel(name, code, geom);
}

var linegeom = [
    113.7018414853, 34.7759332074, 113.7033153405, 34.7776102166,
    113.7021543859, 34.7808799076, 113.6992597205, 34.7809234875,
];
let sjfa = [
    112.63255902535306, 34.672920243506155, 113.307823128973, 34.72645894739312,
    113.2690843650574, 34.580521179761, 112.82785872845471, 34.478449859524964,
    112.61597406632606, 34.52261227072485,
];
function addline(geomarray) {
    $mapevent.f_AddPolyLine(geomarray);
}

var gloumgeom = [
    113.7018414853, 34.7759332074, 113.7033153405, 34.7776102166,
    113.7021543859, 34.7808799076, 113.7521543859, 34.7808799076,
];
function addcloumline(geom) {
    $mapevent.f_AddpolylineVolume(geom);
}

var gongeom = [
    -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0,
];
function drawpolygon(gongeom) {
    $mapevent.f_AddReg(gongeom);
}

var mesure = ref(false);
function mesureline() {
    mesure.value = !mesure.value;
    if (mesure.value) {
        ElMessage({
            message: "开始测量!",
        });
        $mapevent.measureLine();
    } else if (!mesure.value) {
        ElMessage({
            message: "测量结束,已清除测距.",
        });
        $mapevent.f_ClearEntities();
    }
}

var gonmesure = ref(false);
function mesuregon() {
    gonmesure.value = !gonmesure.value;
    if (gonmesure.value) {
        ElMessage({
            message: "开始测量!",
        });
        $mapevent.mesurePolygon();
    } else if (!gonmesure.value) {
        ElMessage({
            message: "测量结束,已清除测距.",
        });
        $mapevent.f_ClearEntities();
    }
}

function addwall(e) {
    $mapevent.f_creatwall(e);
}

function clear() {
    ElMessage({ message: "已清除!" });
    $mapevent.f_ClearEntities();
    $mapevent.remove3Dtile();
}

function addball() {
    $mapevent.f_AddBall();
}

function addZL() {
    $mapevent.f_AddZL();
}

function addYZ() {
    $mapevent.f_AddYZ();
}

function zoomin() {
    $mapevent.f_ZoomIn();
}

function zoomout() {
    $mapevent.f_ZoomOut();
}

function mflyto(point, f) {
    $mapevent.flyto(`POINT(${point})`);
    if (f == "zmd") {
        $mapevent.addmaplayer("http://zmd.yugaosu.com/map/{z}/{x}/{y}.png");
    } else {
        $mapevent.addmaplayer("http://hg.yugaosu.com/map/{z}/{x}/{y}.png");
    }
}

function changemodel(t) {
    $mapevent.f_ShowMapModel(t);
}
let lighting = ref(false);
function light() {
    lighting.value = !lighting.value;
    if (lighting.value) {
        ElMessage("开启光照");
        $mapevent.f_MapLight(lighting.value);
    } else {
        ElMessage("关闭光照");
        $mapevent.f_MapLight(lighting.value);
    }
}

let lock = ref(false);
function lockcamera() {
    lock.value = !lock.value;
    if (!lock.value) {
        ElMessage("取消锁定");
        $mapevent.f_camerarote(lock.value);
    } else {
        ElMessage("锁定摄像头");
        $mapevent.f_camerarote(lock.value);
    }
}

function getrange() {
    let rang = $mapevent.f_GetMapRect();
    ElMessageBox.alert(
        `当前地图显示范围为：
    <br/>东经：${rang.east}度-${rang.west}度
    <br/>北纬：${rang.north}度-${rang.south}度`,
        "范围",
        {
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            callback: (action) => {},
        }
    );
}

function addmod() {
    let url = "3Dmod/Cesium_Air.glb";
    $mapevent.f_AddMod(url, 113.7018414853, 34.7759332074, 200);
}

let triger = ref(false);
function flybypath() {
    triger.value = !triger.value;
    if (triger.value) {
        ElMessage("开始飞行");
    } else {
        ElMessage("取消飞行");
    }
    $mapevent.f_FlyByPath(triger.value);
}

let mystate = ref(false);
function rotateonpoint() {
    mystate.value = !mystate.value;
    if (!mystate.value) {
        $mapevent.f_ClearTick();
        ElMessage("取消旋转");
        return;
    } else {
        ElMessage("开始旋转");
        let options = {
            lng: 113.6197238586,
            lat: 34.7575827241,
            height: 15.8,
            heading: 0.0,
            pitch: 0.0,
            roll: 0.0,
        };
        $mapevent.f_LookAtPosition(options);
    }
}

function flashpoint() {
    ElMessage("闪烁点");
    $mapevent.f_AddFlashPntByXYH(
        113.132947,
        34.596344,
        10.0,
        "Cesium.Color.RED"
    );
}
function manimateline() {
    $mapevent.animationline();
}
/**
 * 是否确定退出系统
 */
function exit() {
    ElMessageBox.confirm("是否确定退出系统？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(() => {
            console.log(localStorage.removeItem("token"));
            $router.push({
                name: "login",
            });
        })
        .catch(() => {});
}
/**
 * 添加视点
 */
function ViewpointDddition() {
    ElMessageBox.prompt("", "添加视点", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入视点名称",
        inputValue: "",
        beforeClose: (action, instance, done, value) => {
            if (action === "confirm") {
                if (instance.inputValue) {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = "等待...";
                    $fetch(
                        "/viewPoint/add",
                        {
                            name: instance.inputValue,
                            ...$mapevent.f_GetCurCameraInfo(),
                        },
                        "post"
                    ).then((red) => {
                        console.log(3133, red);
                        if (red.code == 200) {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 300);
                        }
                    });
                } else {
                    ElMessage({
                        type: "info",
                        message: "视点名称不能为空！",
                    });
                }
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "保存成功！",
            });
            store.changeViewpoint();
        })
        .catch(() => {});
}
/**
 * 添加标点
 */
function AddPunctuation() {
    store.changeTagEntity(null);
    ElMessage("左键点击获取坐标添加，右键取消！");
    store.changePunctuation("type", "point");
    store.changePunctuation("title", "添加标点");
    store.changeGather("show", true);
}
</script>
<template>
    <div id="topnav">
        <div class="title"></div>
        <div>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img
                        src="../assets/topimg/ico_14.png"
                        alt=""
                        style="margin-top: 7px; margin-right: 20px"
                    />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item>用户密码</el-dropdown-item> -->
                        <el-dropdown-item @click="store.changeDataManage(true)"
                            >后台管理</el-dropdown-item
                        >
                        <el-dropdown-item divided @click="exit"
                            >退出系统</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <!-- <div class="mymenu"> -->
        <!-- <div class="menuitem">
                <div class="itemtitle">无人机地图</div>
                <div class="itemlist">
                    <div class="listcon">
                        <div
                            class="itemm"
                            @click="
                                add3dtile(
                                    'http://zsapp.yugaosu.com:8001/lkx2/tileset.json',
                                    -179
                                )
                            "
                        >
                            兰考西
                        </div>
                        <div
                            class="itemm"
                            @click="
                                add3dtile('./dataTileset/sj/tileset.json', -176)
                            "
                        >
                            省界
                        </div>
                    </div>
                </div>
            </div> -->
        <!-- <div class="menuitem">
                <div class="itemtitle">地图实体</div>
                <div class="itemlist">
                    <div class="listcon">
                        <div class="itemm" @click="addpoint(POI)">
                            设置文字标注
                        </div>
                        <div
                            class="itemm"
                            @click="addimgpoint('测试点位', '107', geom)"
                        >
                            设置文字图片标注
                        </div>
                        <div class="itemm" @click="addline(sjfa)">
                            添加折线
                        </div>
                        <div class="itemm" @click="addcloumline(gloumgeom)">
                            添加管线
                        </div>
                        <div class="itemm" @click="drawpolygon(gongeom)">
                            绘制面
                        </div>
                        <div class="itemm" @click="addmod()">添加模型</div>
                        <div class="itemm" @click="addwall('redwall')">
                            添加墙体
                        </div>
                        <div class="itemm" @click="addball()">添加球体</div>
                        <div class="itemm" @click="addZL()">添加走廊</div>
                        <div class="itemm" @click="addYZ()">添加圆柱体</div>
                    </div>
                </div>
            </div>
            <div class="menuitem">
                <div class="itemtitle">可视化</div>
                <div class="itemlist">
                    <div class="listcon">
                        <div class="itemm" @click="hmltext()">html标签</div>
                        <div class="itemm" @click="flybypath()">沿路径飞行</div>
                        <div class="itemm" @click="rotateonpoint()">
                            视角围绕点旋转
                        </div>
                    </div>
                </div>
            </div>
            <div class="menuitem">
                <div class="itemtitle">地图环境控制</div>
                <div class="itemlist">
                    <div class="listcon">
                        <div class="itemm" @click="getrange()">地图范围</div>
                        <div class="itemm" @click="lockcamera()">
                            锁定相机角度
                        </div>
                        <div class="itemm" @click="light()">
                            <span v-show="!lighting">开启光照</span>
                            <span v-show="lighting">关闭光照</span>
                        </div>
                        <div class="itemm" @click="changemodel(2)">
                            2.5D哥伦布模式
                        </div>
                        <div class="itemm" @click="changemodel(1)">2D模式</div>
                        <div class="itemm" @click="changemodel(0)">3D模式</div>
                        <div class="itemm" @click="clear()">清除实体</div>
                    </div>
                </div>
            </div>
            <div class="menuitem">
                <div class="itemtitle" @click="ttt()">双图对比</div>
            </div> -->
        <!-- </div> -->
        <div class="tools" :style="{ left: `${toolsLeft}px` }">
            <!-- <el-tooltip class="box-item" content="地图定位" placement="bottom">
                <div class="toolscon" @click="zoomin()">
                    <img src="../assets/topimg/ico01.png" alt="" />
                </div>
            </el-tooltip> -->

            <el-tooltip class="box-item" content="图层资源" placement="bottom">
                <div
                    class="toolscon"
                    @click="store.incrementLayer(!store.layerGisShow)"
                >
                    <img src="../assets/topimg/icobg.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="全图显示" placement="bottom">
                <div class="toolscon" @click="comprehensive()">
                    <img src="../assets/topimg/ico06.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="放大" placement="bottom">
                <div class="toolscon" @click="zoomin()">
                    <img src="../assets/topimg/ico01.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="缩小" placement="bottom">
                <div class="toolscon" @click="zoomout()">
                    <img src="../assets/topimg/ico02.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="测距" placement="bottom">
                <div class="toolscon" @click="mesureline()">
                    <img src="../assets/topimg/ico03.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="指北" placement="bottom">
                <div class="toolscon" @click="$mapevent.f_SetMapView()">
                    <img src="../assets/topimg/ico07z.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="添加视点" placement="bottom">
                <div class="toolscon" @click="ViewpointDddition">
                    <img src="../assets/topimg/icosd.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="添加标点" placement="bottom">
                <div
                    class="toolscon"
                    @click="
                        store.changeTagEntity(null);
                        AddPunctuation();
                    "
                >
                    <img src="../assets/topimg/ico08.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                content="添加线标绘"
                placement="bottom"
            >
                <div
                    class="toolscon"
                    @click="
                        store.changeTagEntity(null);
                        $mapevent.draw('polyline');
                    "
                >
                    <img src="../assets/topimg/icoxd.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                content="添加面标绘"
                placement="bottom"
            >
                <div
                    class="toolscon"
                    @click="
                        store.changeTagEntity(null);
                        $mapevent.draw('polygon');
                    "
                >
                    <img src="../assets/topimg/icohm.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                content="添加立体字"
                placement="bottom"
            >
                <div
                    class="toolscon"
                    @click="
                        store.changeTagEntity(null);
                        $mapevent.draw('stereoscopic');
                    "
                >
                    <img src="../assets/topimg/bi.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                content="清除地图实体"
                placement="bottom"
            >
                <div class="toolscon" @click="clear()">
                    <img src="../assets/topimg/qc.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="地图对比" placement="bottom">
                <div class="toolscon" @click="ttt()">
                    <img src="../assets/topimg/ico07.png" alt="" />
                </div>
            </el-tooltip>
            <el-tooltip class="box-item" content="搜索" placement="bottom">
                <div class="toolscon" @click="store.changeSearchShow(true)">
                    <img src="../assets/topimg/icoss.png" alt="" />
                </div>
            </el-tooltip>
            <!-- <el-tooltip class="box-item" content="地图标记" placement="bottom">
                <div class="toolscon" @click="DimensionData()">
                    <img src="../assets/topimg/qc.png" alt="" />
                </div>
            </el-tooltip> -->
            <!-- <el-tooltip class="box-item" content="测量面积" placement="bottom">
                <div class="toolscon" @click="mesuregon()">
                    <img src="../assets/topimg/ico05.png" alt="">
                </div>
            </el-tooltip> -->
        </div>
    </div>
    <SearchFor v-if="store.SearchShow"></SearchFor>
</template>

<style lang="less">
.is-light {
    border: none !important;
}
.el-dropdown,
.el-dropdown-link {
    border: none !important;
}
:focus-visible {
    outline: none;
}

.el-dialog {
    pointer-events: auto !important;
}
.el-dropdown-menu__item {
    color: #fff;
}
.el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: transparent;
    color: #fff;
}

.el-message-box {
    pointer-events: auto !important;
}
</style>
<style scoped>
.el-dropdown-menu {
    background-color: #173543;
}

.toolscon {
    cursor: pointer;
}

.tools {
    /* background-color:black; */
    position: fixed;
    left: -488px;
    top: 80px;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    transition: left 1s ease-out;
}

.toolscon {
    margin-right: 10px;
}
.toolscon img {
    width: 36px;
    height: 36px;
}
.fa {
    width: 42px;
    height: 42px;
    background: url(../assets/icon/icobg.png);
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.mymenu {
    display: flex;
    justify-content: flex-start;
    width: 50%;
}

.mymenu .menuitem {
    color: white;
    line-height: 60px;
    width: 163px;
    text-align: center;
    overflow: hidden;
}

.itemtitle {
    line-height: 60px;
    width: 163px;
    text-align: center;
}

.listcon {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.itemm {
    cursor: pointer;
    margin-right: 20px;
}

.mymenu .menuitem:hover .itemtitle {
    cursor: pointer;
    line-height: 60px;
    width: 163px;
    text-align: center;
    background-image: url(../assets/topimg/45.png);
}

.itemlist {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-out;
    position: absolute;
}

.mymenu .menuitem:hover .itemlist {
    display: block;
    /* position: absolute; */
    background-color: rgba(24, 140, 50, 0.7);
    width: 100%;
    top: 60px;
    left: 0;
    height: 60px;
}

#menu #home:hover .wrj {
    display: block;
}

#menu #single:hover .entity {
    display: block;
}

.wrj,
.entity {
    width: 100%;
    background-color: rgba(24, 140, 50, 0.5);
    position: fixed;
    top: 60px;
    color: white;
    left: 0;
    display: none;
}

#topnav {
    display: flex;
    height: 110px;
    justify-content: space-between;
    background: url(../assets/topimg/logo.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.title {
    padding-left: 20px;
    font-size: 23px;
    font-weight: bold;
    color: white;
    width: 30%;
}

#pad {
    height: 150px;
}

#menu {
    padding: 0 0 0 30px;
    margin: 0;
    list-style: none;
}

#menu li {
    float: left;
    position: relative;
    margin-right: 2px;
    display: block;
    height: 0;
    width: 60px;
    /* border-bottom: 30px solid #069;
    border-left: 30px dashed transparent; */
    border-top: 60px solid transparent;
    border-left: 40px dashed transparent;
}

#menu li a {
    position: absolute;
    left: 60px;
    top: -60px;
    /* border-top: 30px solid #069;
    border-right: 30px dotted transparent; */
    border-bottom: 60px solid transparent;
    border-right: 40px dotted transparent;
    text-decoration: none;
    font-family: arial, sans-serif;
    font-size: 12px;
    color: #fff;
}

#menu li a b {
    display: block;
    /* background-color: rgba(0,0,0,0.5); */
    position: absolute;
    top: 0px;
    left: -60px;
    width: 60px;

    line-height: 60px;
    text-align: center;
    cursor: pointer;
    font-weight: normal;
}

#menu li:hover a:hover b {
    background-color: rgba(24, 140, 50, 0.5);
}

#menu li:hover a {
    border-bottom: 60px solid rgba(24, 140, 50, 0.5);
}

#menu li:hover {
    cursor: pointer;
    border-top: 60px solid rgba(24, 140, 50, 0.5);
}

#menu li#dropline {
    width: 80px;
}

#menu li#dropline a {
    left: 80px;
}

#menu li#dropline a b {
    left: -80px;
    width: 80px;
}

#menu li a:hover {
    color: white;
}

.home #menu li#home,
.single #menu li#single,
.dropdown #menu li#dropdown,
.dropline #menu li#dropline,
.flyout #menu li#flyout,
.support #menu li#support,
.contact #menu li#contact {
    border-bottom-color: #e70;
}

.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a {
    color: #000;
    border-top-color: #e70;
}

.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b {
    background: #e70;
}
</style>
